import './indx.scss'
import {useState,useEffect} from 'react'
import {getNav} from '../../request/api'
const Props=()=>{
     const [nav,SetNav]=useState([]) 
      useEffect(()=>{
    getNav().then(res=>{
        console.log(res.data.nav,'导航栏数据')
        SetNav(res.data.nav.title)
    })
  },[])
    return (
            <div className='Props'>
                <div className='dankuang-top'>
                            <div className='dankuang-input'>
                                <input placeholder='搜索海量视频文件源'></input><span className='iconfont icon-sousuo'></span>
                            </div>
                            <div className='top-img'>
                                <img src='../src/assets/images/4.png'></img>
                            </div>
                        </div>
                        <div className='video-sp'>
                            <img src='../src/assets/images/2.png'></img>
                            <img src='../src/assets/images/3.png'></img>
                            <img src='../src/assets/images/4.png'></img>
                        </div>
                        <div className='dankuangzi'>
                            
                                {
                                    nav.map((item,index)=>{
                                        return <div key={index}>
                                            <span className='title'>{item.name}</span>
                                            {
                                                item.children.map((item2,index2)=>{
                                                    return <div key={index2}>
                                                        <span>{item2.title}</span>
                                                    </div>
                                                })
                                            }
                                        </div>
                                    })
                                }
                            
                        </div>
            </div>
    )
}

export default Props